import ProCard from '@ant-design/pro-card';
import { useEffect, useState } from 'react';
import { useRequest } from '@umijs/hooks';
import { Link } from 'umi';
import './index.less';
import MainHeader from './Components/MainHeader';
import { getSystemLinks } from '@/services/zhirong/getSystemLinks';

const pages = [
  {
    title: '多元查询',
    imgTitle: 'MultiQuery',
    content:
      '为用户提供股权图谱中基本的信息查询，包括实体查询、所有路径查询等股权网络信息查询，提供相关企业信息及股权关系，帮助用户分析实体及其关联实体关系。',
    index: 1,
    url: '/MultiQuery',
    activity: true
  },
  {
    title: '股权穿透',
    imgTitle: 'EquityNetwork',
    content:
      '为用户提供高效的股权网络穿透和分析，包括最终持股比例 、关键持股路径、最终受益人……等穿透式查询，并提供穿透子图相关的金融、图特征统计信息',
    index: 2,
    url: '/EquityNetwork',
    activity:false
  },
  {
    title: '可视化分析',
    imgTitle: 'VisualAnalysis',
    content: `可视化分析为用户展示复杂股权图谱中的不同粒度的结构语义模式，
      分析关键公司、交叉持股以及公司社区，
      使金融图立方的分析变得高效、可行。`,
    index: 3,
    url: '/VisualAnalysis',
    activity:false
  },
  {
    title: '舆情监测',
    imgTitle: 'FinancialPublicOpinion',
    content:
      '给定一个目标上市公司以及一定大小时间窗口内与该公司的相关的金融新闻，同时引入外部的公司关联知识和与其他上市公司的关联关系，构建的深度神经网络模型预测在时间窗口末端目标公司的股票价格累积异常收入CAR的正负',
    index: 4,
    url: '/FinancialPublicOpinion',
    activity:false
  },
  {
    title: '数据汇聚',
    imgTitle: 'DataIntegration',
    content:
      '获取企业基本面数据、金融股权数据、金融文本数据、金融舆情数据等，经过规范化的数据处理，将数据封装成统一接口，提供舆情数据统计、预警，金融公告数据统计等服务。',
    index: 5,
    url: '/DataIntegration/PublicOpinion',
    activity:false
  },
  {
    title: '联邦分布式',
    imgTitle: 'FED',
    content:
      '数据往往分布在多个独立自治的RDF数据源，而查询往往涉及多个数据源，因此需使用联邦分布式平台对多个数据源进行融合，从而提供与本地单数据源一致的查询服务。通过联邦分布式平台实现多个独立RDF数据源的“透明”查询。',
    index: 6,
    url: '/FED',
    activity:false
  },

];

const urlMap = new Map()


const outerPages = [
  {
    title: "金融时序知识图谱构建",
    icon: "/icons/1.svg",
    url: "http://cn2.hxdcloud.com:51112/",
    description: "金融时序超图的构建、融合与更新"
  },
  {
    title: "金融风险规则挖掘与推理",
    icon: "/icons/2.svg",
    url: "http://cn2.hxdcloud.com:55556/data/dist/index.html",
    description: "金融时序知识图谱可解释性规则挖掘和推理模型"
  },
  {
    title: "金融舆情分析与风险防控平台",
    icon: "/icons/3.svg",
    url: "https://d5d4-61-185-207-108.ap.ngrok.io",
    description: "西工大和天大联合的金融舆情分析与风险防控平台"

  },
  {
    title: "金融时序知识图谱查询分析",
    icon: "/icons/4.svg",
    url: '/#main',
    description: "武汉大学金融时序知识图谱查询与分析平台"
  }
]

const Main = () => {
  const { run } = useRequest(getSystemLinks, {
    manual: true,
    onSuccess: (res) => {
      res.data.forEach((item) => {
        urlMap.set(item.system_subject, item.system_url)
      })
    },
  });
  const [activeKey, setActiveKey] = useState(1);
  
  



  useEffect(() => {
    run();
  }, [outerPages]);
  return (
    <>
      <ProCard style={{ padding: '25px' }} ghost direction="column">
        <MainHeader style={{ id: "1" }}></MainHeader>
        {/* 平台功能 */}
        <ProCard style={{ marginTop: '25px', borderRadius: '16px', padding: '0' }} direction="column">
          <h2 style={{ textAlign: 'center', fontSize: '26px', fontWeight: 'bold', padding: 0 }}>平台功能</h2>
          <img src='./icons/decoration.svg' style={{ width: "60px", height: "8px", margin: "0 auto" }}></img>
          <ProCard direction="row" style={{ marginBottom: '-24px', padding: '0' }}>
            {pages.map((page) =>
              activeKey === page.index ? (
                <ProCard
                hoverable bordered
                  colSpan={6}
                  layout="center"
                  direction="column"
                  style={{
                    position:'relative',
                    zIndex:'1',
                    height: '400px',
                    padding: '19px',
                    transition: 'box-shadow 0.8s, border-color 0.8s'
                  }}
                >
                  <img src={`/icons/${page.imgTitle}1.svg`} style={{ marginBottom: '15px' }}></img>
                  <h3 style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '20px' }}>
                    {page.title}
                  </h3>
                  <p>{page.content}</p>
                  <Link to={page.url} target="_blank">
                    查看详情
                  </Link>
                </ProCard>
              ) : (
                <ProCard
                hoverable bordered
                  onMouseEnter={() => setActiveKey(page.index)}
                  colSpan={3.6}
                  layout="center"
                  direction="column"
                  style={{
                    height: '400px',
                    padding: '19px',
                    
                  }}
                  
                >
                  <img src={`/icons/${page.imgTitle}.svg`} style={{ marginBottom: '25px' }}></img>
                  <h3 style={{ textAlign: 'center', fontSize: '21px' }}>{page.title}</h3>
                </ProCard>
              ),
            )}
          </ProCard>
        </ProCard>

        {/* 其他课题组链接 */}
        <ProCard style={{ marginTop: '25px', borderRadius: '16px', padding: '0', paddingBottom: "20px" }} direction="column">
          <h2 style={{ textAlign: 'center', fontSize: '26px', fontWeight: 'bold' }}>全部产品</h2>
          <img src='./icons/decoration.svg' style={{ width: "60px", height: "8px", margin: "0 auto" }}></img>
          <ProCard direction="row" style={{ marginBottom: '-24px', padding: '0' }}>
            {outerPages.map((item) =>
            (<ProCard bordered layout="center" direction='column' colSpan={6}
              style={{
                height: "300px",
                paddingBottom: "50px",
                paddingTop: "20px"
              }}>
              <a href={item.url} target="_blank" >
                <img style={{ height: "200px", width: "250px", marginTop: "25px" }} src={item.icon} alt={item.title} />
              </a>
              <div className='title'>{item.title}</div>
              <a href={item.url} target="_blank" style={{ color: "#9254DE", margin: "1em 0" }}>查看详情</a>
            </ProCard>)
            )}
          </ProCard>
        </ProCard >


      </ProCard >

    </>
  );
};

export default Main;
